<template>
  <div id="silde_width" style="width: 200px;position: relative;height: 100%">
    <a-icon id="menuIcon" style="margin-bottom: 16px;position: absolute;left:200px;top:-70px"
      class="trigger"
      :type="collapsed ? 'menu-unfold' : 'menu-fold'"
      @click="toggleCollapsed"
    />
<!--    <a-button type="primary" style="margin-bottom: 16px;position: absolute;left:280px" @click="toggleCollapsed">-->
<!--      <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'"/>-->
<!--    </a-button>-->

    <a-menu
      class="menu_list"
      :default-selected-keys="[currentkey]"
      :default-open-keys="[currentkey]"
      mode="inline"
      theme=""
      :inline-collapsed="collapsed"
      @select="selectMenuItem"
      @openChange="openChangeEvent"
    >

      <a-sub-menu v-for="(item) of config" :key="item.key">
        <span slot="title"><a-icon :type="item.icon" /><span>{{item.title}}</span></span>
        <a-menu-item v-for="(citem) of item.children" :key="citem.key" @click="changeMenu(citem)">
          {{citem.title}}
        </a-menu-item>
      </a-sub-menu>

    </a-menu>
  </div>
</template>

<script>
import config from "@/config/config.js";
// this.$store.state.currentKey
export default {
  name: 'SildeMenu',
  data () {
    return {
      collapsed: false,
      collapsedFlag:false,
      config:config.Menu,
      currentkey:location.hash.slice(2)
    }
  },
  computed:{
      // currentKey:this.$store.state.currentKey
  },
  methods: {
    toggleCollapsed () {
      this.collapsed = !this.collapsed
      this.collapsedFlag = !this.collapsedFlag;
      // eslint-disable-next-line no-unused-vars
      // ant-layout-sider ant-layout-sider-dark
      let sildeWidth = document.getElementsByClassName('ant-layout-sider')[0]
      let menuIcon = document.getElementById('menuIcon');
      if(this.collapsedFlag){
        sildeWidth.style.minWidth = '100px';
        sildeWidth.style.flex = '0px';
      }else{
        sildeWidth.style.minWidth = '200px';
        sildeWidth.style.flex = '200px';
      }

    },
    // 选中菜单
    selectMenuItem(argments) {
      this.$emit("select", {
        currentkey: argments.key
      });
    },
    // 点击相应菜单导航到相应页面
    changeMenu(argments) {
      // localStorage.setItem("currentKey", argments.key);
      this.$router.push(`/${argments.key}`);
      this.setTabsList(argments)
    },
    // 菜单组打开或者关闭事件
    openChangeEvent(argments) {
      if (argments.length != 0) {
        // 如果数组length为0表示所有的菜单都是关闭的
        this.openKeys = [argments[argments.length - 1]];
      } else {
        this.openKeys = [];
      }
      localStorage.setItem("opkey", this.openKeys);
    }
  }
}
</script>

<style scoped>
  .menu_list{
    height:100%;
  }
</style>
